<template>
  <div>
    <h1>App</h1>
    <!-- <BsInfo username="jack" :age="info.age" :max-size="100" :is-allow="info.isAllow"></BsInfo> -->
    <!-- <BsInfo username="info.username" :age="info.age" is-allow :hobby="info.hobby" :size="info.size">
    </BsInfo> -->
    <!-- <BsInfo v-bind="info"></BsInfo> -->
    <!-- <BsInfo is-allow></BsInfo> -->
    <!-- <BsButton @save-user="say"></BsButton>
    <BsButton @save-user="(e) => { say(e) }"></BsButton>
    <BsButton @save-user="say($event)"></BsButton> -->
    <BsButton @add-user="say"></BsButton>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import BsButton from './components/BsButton.vue';
import BsInfo from './components/BsInfo.vue';

const say = function (e) {
  console.log('hello', e);
}

const info = ref({
  // username: 'jack',
  age: 25,
  // isAllow: null,
  hobby: ['css', 'html', 'js'],
  size: { h: 100, w: 200 },
  maxSize: 100,
  gender: 'boy',
  phone: '18287654441',
  // cb: function () {
  //   return 'hello'
  // }
})



</script>


<style>
div {
  border: solid;
  padding: 20px
}
</style>